<template>
  <view class="content">
    <ZPaging
      ref="paging"
      v-model="list"
      :auto="false"
      :auto-show-system-loading="true"
      loading-more-no-more-text="沒有更多了"
      loading-more-default-text="點擊加載更多"
      loading-more-loading-text="正在加載..."
      loading-more-fail-text="加載失敗,點擊重新加載"
      empty-view-text="沒有數據哦~"
      refresher-default-text="繼續下拉刷新"
      refresher-pulling-text="鬆開立即刷新"
      refresher-refreshing-text="正在刷新"
      empty-view-reload-text="重新加載"
      empty-view-error-text="加載失敗"
      @query="queryList"
    >
      <template #top>
        <NavBar :title="title" :autoBack="false" id="nav">
          <template #left>
            <view class="navbar-left center" @click="goBack">
              <u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
              <text class="c007aff">{{ lefttitle }}</text>
            </view>
          </template>
        </NavBar>
      </template>
      <template #default>
        <view class="widths main">
          <view v-for="(v, k) in list" :key="k">
            <view v-if="v.ident == 1" class="row">
              <u-swipe-action
                :index="k"
                :options="options"
                @click="swipeAction"
              >
                <view class="mt-20 start item">
                  <view class="left" @click="toPage('LogDetail', { id: v.id })">
                    <view class="pic" v-if="v.thumb">
                      <!-- <u-image :src="v.thumb" width="200rpx" height="160rpx" mode="aspectFill" border-radius="10rpx"></u-image> -->
                      <image
                        :src="v.thumb"
                        width="20rpx"
                        height="16rpx"
                        mode="aspectFit"
                        border-radius="10rpx"
                      ></image>
                    </view>
                    <view class="center pic" v-else>
                      <u-icon name="photo" size="190" color="#e0e0e0"></u-icon>
                      <!-- <u-image src="../../static/nopic.png" width="200rpx" height="160rpx" mode="aspectFill" border-radius="10rpx"></u-image> -->
                    </view>
                  </view>
                  <view class="flex right">
                    <view class="l" @click="toPage('LogDetail', { id: v.id })">
                      <view class="f32 bold mb-8 c333 title">{{
                        v.tasktitle
                      }}</view>
                      <view class="c999 time">{{ v.time }}</view>
                    </view>
                    <view
                      class="center m"
                      @click="toPage('Message', { id: v.id })"
                    >
                      <u-icon
                        name="chat-fill"
                        size="46"
                        color="#007aff"
                      ></u-icon>
                    </view>
                    <view class="dirCloumn r" v-if="v.ident == 3">
                      <view class="end mess">
                        <view class="f24 c0DA701" v-if="v.adstatus === 2"
                          >已讀</view
                        >
                        <view class="f24 c007afff" v-else-if="v.adstatus === 1"
                          >未讀</view
                        >
                        <view class="f24 c999" v-else>無</view>
                      </view>
                      <view class="end mess_num">
                        <view class="f24 c999">留言</view>
                        <text class="f24 ml-4 num">{{ v.total }}</text>
                      </view>
                    </view>
                    <view class="dirCloumn r" v-else>
                      <view class="end mess">
                        <view class="f24 c0DA701" v-if="v.status === 2"
                          >已讀</view
                        >
                        <view class="f24 c007afff" v-else-if="v.status === 1"
                          >未讀</view
                        >
                        <view class="f24 c999" v-else>無</view>
                      </view>
                      <view class="end mess_num">
                        <view class="f24 c999">留言</view>
                        <text class="f24 ml-4 num">{{ v.total }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </u-swipe-action>
            </view>
            <view v-else class="mt-20 start item">
              <view class="left" @click="toPage('LogDetail', { id: v.id })">
                <view class="pic" v-if="v.thumb">
                  <!-- <u-image :src="v.thumb" width="200rpx" height="160rpx" mode="aspectFill" border-radius="10rpx"></u-image> -->
                  <image
                    :src="v.thumb"
                    width="20rpx"
                    height="16rpx"
                    mode="aspectFit"
                    border-radius="10rpx"
                  ></image>
                </view>
                <view class="center pic" v-else>
                  <u-icon name="photo" size="190" color="#e0e0e0"></u-icon>
                  <!-- <u-image src="../../static/nopic.png" width="200rpx" height="160rpx" mode="aspectFill" border-radius="10rpx"></u-image> -->
                </view>
              </view>
              <view class="flex right">
                <view class="l" @click="toPage('LogDetail', { id: v.id })">
                  <view class="f32 bold mb-8 c333 title">{{
                    v.tasktitle
                  }}</view>
                  <view class="c999 time">{{ v.time }}</view>
                </view>
                <view class="center m" @click="toPage('Message', { id: v.id })">
                  <u-icon name="chat-fill" size="46" color="#007aff"></u-icon>
                </view>
                <view class="dirCloumn r" v-if="v.ident == 3">
                  <view class="end mess">
                    <view class="f24 c0DA701" v-if="v.adstatus === 2"
                      >已讀</view
                    >
                    <view class="f24 c007afff" v-else-if="v.adstatus === 1"
                      >未讀</view
                    >
                    <view class="f24 c999" v-else>無</view>
                  </view>
                  <view class="end mess_num">
                    <view class="f24 c999">留言</view>
                    <text class="f24 ml-4 num">{{ v.total }}</text>
                  </view>
                </view>
                <view class="dirCloumn r" v-else>
                  <view class="end mess">
                    <view class="f24 c0DA701" v-if="v.status === 2">已讀</view>
                    <view class="f24 c007afff" v-else-if="v.status === 1"
                      >未讀</view
                    >
                    <view class="f24 c999" v-else>無</view>
                  </view>
                  <view class="end mess_num">
                    <view class="f24 c999">留言</view>
                    <text class="f24 ml-4 num">{{ v.total }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template #bottom>
        <view class="uni-list-cell">
          <view class="uni-list-item">
            <view class="uni-list-cell-left"> 選擇摘要： </view>
            <view class="uni-list-cell-db">
              <picker
                @change="bindPickerChange"
                :value="pickerIndex"
                :range="pickerList"
              >
                <view class="uni-input">{{ pickerList[pickerIndex] }}</view>
              </picker>
            </view>
          </view>
          <view class="uni-list-item">
            <view class="uni-list-cell-left"> 選擇任務： </view>
            <view class="uni-list-cell-db">
              <picker
                @change="bindSectionChange"
                :value="sectionIndex"
                :range="sectionList"
              >
                <view class="uni-input">{{ sectionList[sectionIndex] }}</view>
              </picker>
            </view>
          </view>
        </view>
      </template>
    </ZPaging>
    <u-modal
      v-model="delshow"
      :mask-close-able="true"
      :show-cancel-button="true"
      title="確認刪除嗎？"
      content="將會刪除該日誌下的所有數據,刪除后不可恢復"
      @confirm="delLogById"
    ></u-modal>

    <Tabar></Tabar>
  </view>
</template>

<script>
import ZPaging from '@/node_modules/z-paging/components/z-paging/z-paging.vue'
import {
  getTaskLoglist,
  delLog,
  getCasezyByCaseId,
  getTaskByCasezyId,
} from '@/api/apis.js'
import NavBar from '@/component/NavBar'
import Tabar from '@/component/HomeTab'
export default {
  components: {
    NavBar,
    Tabar,
    ZPaging,
  },
  data() {
    return {
      curId: 0,
      title: '',
      lefttitle: '',
      list: [],
      options: [
        {
          text: 'Delete',
          style: {
            backgroundColor: '#ff0000',
            color: '#fff',
          },
        },
      ],
      delshow: false,
      delId: '',
      pickerList: ['全部'],
      pickerIndex: 0,
      pickerAllList: [],
      sectionAllList: [],
      sectionList: ['全部'],
      sectionIndex: 0,
      task_id: '',
      casezy_id: '',
    }
  },
  onShow() {
    this.$nextTick(() => {
      if (uni.getStorageSync('islogin')) {
        this.init()
        this.getCasezyByCaseId()
      }
    })
  },
  onLoad() {
    if (uni.getStorageSync('islogin')) {
      const { id, leftTitle } = this.$Route.query
      if (!id) {
        // this.$Errback("數據錯誤")
        this.$Toast('數據錯誤')
        setTimeout(() => {
          this.toPage('Main')
        }, 1200)
      } else {
        this.curId = id
        this.lefttitle = leftTitle
      }
    } else {
      this.$Toast('請先登錄')
      setTimeout(() => {
        this.toPage('Home')
      }, 1200)
    }
  },
  methods: {
    init() {
      this.reload()
    },
    swipeAction(index) {
      this.delId = this.list[index].id
      this.delshow = true
    },
    delLogById() {
      if (this.delId <= 0) {
        return false
      }
      let data = {
        id: this.delId,
        uid: uni.getStorageSync('uid'),
      }
      delLog(data)
        .then((res) => {
          this.$Toast('刪除成功')
          setTimeout(() => {
            this.reload()
          }, 1200)
        })
        .catch((err) => {
          if (err.code === 102) {
            this.$ClearLogin(err.msg)
          } else {
            this.$Toast(err.msg)
          }
        })
    },
    queryList(pageNo, pageSize) {
      let data = {
        pageNo,
        pageSize,
        uid: uni.getStorageSync('uid'),
        caseid: this.curId,
        casezy_id: this.casezy_id,
        task_id: this.task_id,
      }
      getTaskLoglist(data)
        .then((res) => {
          this.$refs.paging.complete(res)
        })
        .catch((err) => {
          if (err.code === 102) {
            this.$ClearLogin(err.msg)
          } else {
            this.$Toast(err.msg)
          }
        })
    },
    reload() {
      this.$refs.paging.reload()
    },
    goBack() {
      uni.navigateBack(-1)
    },
    toPage(name, params = {}) {
      this.$navi({
        route: {
          name,
          params,
        },
      })
    },
    getCasezyByCaseId() {
      let data = {
        uid: uni.getStorageSync('uid'),
        case_id: this.curId,
      }
      getCasezyByCaseId(data).then((res) => {
        this.pickerAllList = res
        this.pickerAllList.unshift({
          id: '',
          title: '全部',
        })
        this.pickerList = this.pickerAllList.map((item) => {
          return item.title
        })
      })
    },
    getTaskByCasezyId() {
      let data = {
        uid: uni.getStorageSync('uid'),
        casezy_id: this.casezy_id,
      }
      getTaskByCasezyId(data)
        .then((res) => {
          this.sectionAllList = res || []
          this.sectionAllList.unshift({
            id: '',
            title: '全部',
          })
          this.sectionList = this.sectionAllList.map((item) => {
            return item.title
          })
        })
        .catch((err) => {
          if (err.code === 102) {
            this.$ClearLogin(err.msg)
          } else {
            this.$Toast(err.msg)
          }
        })
    },
    bindPickerChange(e) {
      this.pickerIndex = e.detail.value
      this.sectionIndex = 0
      this.task_id = ''
      this.sectionList = ['全部']
      this.casezy_id = this.pickerAllList[this.pickerIndex].id
      this.reload()
      if(this.casezy_id){
        this.getTaskByCasezyId()
      }
    },
    bindSectionChange(e) {
      this.sectionIndex = e.detail.value
      this.task_id = this.sectionAllList[this.sectionIndex].id
      this.reload()
    },
  },
}
</script>

<style lang="scss">
.content {
  min-height: 100vh;
}
.main {
  padding-top: 88rpx;
  padding-bottom: 50rpx;
  .item {
    width: 100%;
    align-items: center;
    .left {
      width: 200rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
      .pic {
        width: 200rpx;
        height: 160rpx;
        border-radius: 10rpx;
        border: 2rpx solid #e0e0e0;
        overflow: hidden;
        /deep/ uni-image {
          width: 100% !important;
          height: 160rpx !important;
        }
      }
    }
    .right {
      width: calc(100% - 220rpx);
      .l {
        width: calc(100% - 180rpx);
      }
      .m {
        width: 80rpx;
        flex-shrink: 0;
      }
      .r {
        width: 100rpx;
        flex-shrink: 0;
        .num {
          // margin-left: auto;
        }
      }
    }
  }
}
.row {
  width: 100%;
  ::v-deep .u-btn-text {
    color: #fff;
  }
}
.uni-list-cell {
  display: flex;
  gap: 20rpx;
  // justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e0e0e0;
  padding-bottom: 120rpx;
  .uni-list-item{
    display: flex;
    align-items: center;
  }
  .uni-list-cell-db {
    flex: 1;
    display: flex;
    // padding-left: 48rpx;
    justify-content: flex-start;
    align-items: center;
    .uni-input {
      width: 80px;
      color: #007aff;
      border: 1px solid #ededed;
      border-radius: 10rpx;
      padding: 10rpx 20rpx;
      // 文字超出隐藏
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      
    }
  }
}
</style>
